<template>
  <div class="system-settings">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="settings-nav">
          <el-menu
            :default-active="activeMenu"
            @select="handleMenuSelect"
          >
            <el-menu-item index="basic">基本设置</el-menu-item>
            <el-menu-item index="security">安全设置</el-menu-item>
            <el-menu-item index="notification">通知设置</el-menu-item>
            <el-menu-item index="storage">存储设置</el-menu-item>
          </el-menu>
        </el-card>
      </el-col>
      
      <el-col :span="18">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>{{ menuTitles[activeMenu] }}</span>
              <el-button type="primary" @click="saveSettings">保存设置</el-button>
            </div>
          </template>
          
          <!-- 基本设置 -->
          <div v-if="activeMenu === 'basic'">
            <el-form :model="basicSettings" label-width="120px">
              <el-form-item label="系统名称">
                <el-input v-model="basicSettings.systemName" />
              </el-form-item>
              <el-form-item label="系统描述">
                <el-input 
                  v-model="basicSettings.systemDescription" 
                  type="textarea" 
                  :rows="3"
                />
              </el-form-item>
              <el-form-item label="默认语言">
                <el-select v-model="basicSettings.defaultLanguage">
                  <el-option label="中文" value="zh-CN" />
                  <el-option label="English" value="en-US" />
                </el-select>
              </el-form-item>
              <el-form-item label="时区">
                <el-select v-model="basicSettings.timezone">
                  <el-option label="北京时间 (UTC+8)" value="Asia/Shanghai" />
                  <el-option label="纽约时间 (UTC-5)" value="America/New_York" />
                  <el-option label="伦敦时间 (UTC+0)" value="Europe/London" />
                </el-select>
              </el-form-item>
              <el-form-item label="启用维护模式">
                <el-switch v-model="basicSettings.maintenanceMode" />
              </el-form-item>
            </el-form>
          </div>
          
          <!-- 安全设置 -->
          <div v-if="activeMenu === 'security'">
            <el-form :model="securitySettings" label-width="150px">
              <el-form-item label="密码最小长度">
                <el-input-number 
                  v-model="securitySettings.passwordMinLength" 
                  :min="6" 
                  :max="32" 
                />
              </el-form-item>
              <el-form-item label="密码复杂度要求">
                <el-checkbox-group v-model="securitySettings.passwordComplexity">
                  <el-checkbox label="uppercase">大写字母</el-checkbox>
                  <el-checkbox label="lowercase">小写字母</el-checkbox>
                  <el-checkbox label="numbers">数字</el-checkbox>
                  <el-checkbox label="specialChars">特殊字符</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="会话超时时间">
                <el-input-number 
                  v-model="securitySettings.sessionTimeout" 
                  :min="1" 
                  :max="1440"
                /> 分钟
              </el-form-item>
              <el-form-item label="登录失败次数限制">
                <el-input-number 
                  v-model="securitySettings.maxLoginAttempts" 
                  :min="1" 
                  :max="10"
                />
              </el-form-item>
              <el-form-item label="启用二次验证">
                <el-switch v-model="securitySettings.twoFactorAuth" />
              </el-form-item>
            </el-form>
          </div>
          
          <!-- 通知设置 -->
          <div v-if="activeMenu === 'notification'">
            <el-form :model="notificationSettings" label-width="150px">
              <el-form-item label="邮件通知">
                <el-switch v-model="notificationSettings.emailEnabled" />
              </el-form-item>
              <el-form-item label="SMTP服务器" v-if="notificationSettings.emailEnabled">
                <el-input v-model="notificationSettings.smtpServer" />
              </el-form-item>
              <el-form-item label="SMTP端口" v-if="notificationSettings.emailEnabled">
                <el-input-number 
                  v-model="notificationSettings.smtpPort" 
                  :min="1" 
                  :max="65535"
                />
              </el-form-item>
              <el-form-item label="SMTP用户名" v-if="notificationSettings.emailEnabled">
                <el-input v-model="notificationSettings.smtpUsername" />
              </el-form-item>
              <el-form-item label="短信通知">
                <el-switch v-model="notificationSettings.smsEnabled" />
              </el-form-item>
              <el-form-item label="钉钉通知">
                <el-switch v-model="notificationSettings.dingtalkEnabled" />
              </el-form-item>
              <el-form-item label="企业微信通知">
                <el-switch v-model="notificationSettings.wechatEnabled" />
              </el-form-item>
            </el-form>
          </div>
          
          <!-- 存储设置 -->
          <div v-if="activeMenu === 'storage'">
            <el-form :model="storageSettings" label-width="150px">
              <el-form-item label="文件存储方式">
                <el-radio-group v-model="storageSettings.storageType">
                  <el-radio label="local">本地存储</el-radio>
                  <el-radio label="oss">阿里云OSS</el-radio>
                  <el-radio label="cos">腾讯云COS</el-radio>
                </el-radio-group>
              </el-form-item>
              <div v-if="storageSettings.storageType === 'local'">
                <el-form-item label="存储路径">
                  <el-input v-model="storageSettings.localPath" />
                </el-form-item>
                <el-form-item label="最大存储空间">
                  <el-input-number 
                    v-model="storageSettings.maxSpace" 
                    :min="1" 
                    :max="1000000"
                  /> GB
                </el-form-item>
              </div>
              <div v-if="storageSettings.storageType === 'oss'">
                <el-form-item label="Access Key ID">
                  <el-input v-model="storageSettings.ossAccessKeyId" />
                </el-form-item>
                <el-form-item label="Access Key Secret">
                  <el-input 
                    v-model="storageSettings.ossAccessKeySecret" 
                    type="password"
                    show-password
                  />
                </el-form-item>
                <el-form-item label="Bucket名称">
                  <el-input v-model="storageSettings.ossBucket" />
                </el-form-item>
                <el-form-item label="Endpoint">
                  <el-input v-model="storageSettings.ossEndpoint" />
                </el-form-item>
              </div>
              <el-form-item label="启用文件压缩">
                <el-switch v-model="storageSettings.fileCompression" />
              </el-form-item>
              <el-form-item label="自动清理过期文件">
                <el-switch v-model="storageSettings.autoCleanup" />
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

const activeMenu = ref('basic')

const menuTitles = {
  basic: '基本设置',
  security: '安全设置',
  notification: '通知设置',
  storage: '存储设置'
}

const basicSettings = reactive({
  systemName: 'BLE管理系统',
  systemDescription: '蓝牙低功耗设备管理系统',
  defaultLanguage: 'zh-CN',
  timezone: 'Asia/Shanghai',
  maintenanceMode: false
})

const securitySettings = reactive({
  passwordMinLength: 8,
  passwordComplexity: ['uppercase', 'lowercase', 'numbers'],
  sessionTimeout: 30,
  maxLoginAttempts: 5,
  twoFactorAuth: false
})

const notificationSettings = reactive({
  emailEnabled: true,
  smtpServer: 'smtp.example.com',
  smtpPort: 587,
  smtpUsername: 'admin@example.com',
  smsEnabled: false,
  dingtalkEnabled: false,
  wechatEnabled: false
})

const storageSettings = reactive({
  storageType: 'local',
  localPath: '/var/data',
  maxSpace: 1000,
  ossAccessKeyId: '',
  ossAccessKeySecret: '',
  ossBucket: '',
  ossEndpoint: '',
  fileCompression: true,
  autoCleanup: true
})

const handleMenuSelect = (index: string) => {
  activeMenu.value = index
}

const saveSettings = () => {
  ElMessage.success('设置保存成功')
  // 这里应该调用API保存设置
}
</script>

<style scoped lang="scss">
.system-settings {
  padding: 20px;
  
  .settings-nav {
    height: 100%;
    
    :deep(.el-menu) {
      border: none;
    }
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>